<template>
  <div>
    <div class="changeSex"
         @click="changeSex">{{sex}}</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'Vuex',

  setup () {
    const store = useStore()
    const sex = computed(() => {
      return store.state.sex
    })
    function changeSex () {
      store.commit('changeSex')
    }

    return {
      sex,
      changeSex
    }
  }
})
</script>
